<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>(转)javascript 奇淫巧技44招 - vzvixb</title>
  <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">


<meta name="author" content="even" /><meta name="description" content="1、首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。
2、使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。
" /><meta name="keywords" content="Hugo, theme, even" />






<meta name="generator" content="Hugo 0.90.1 with theme even" />


<link rel="canonical" href="https://zhouxiaoxin.gitee.io/post/javascript/javascript-%E5%A5%87%E6%B7%AB%E5%B7%A7%E6%8A%8044%E6%8B%9B%E8%BD%AC/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<link href="/sass/main.min.32d4dc642fec98c34c80bebb9c784c50771712b4a8a25d9f4dd9cce3534b426e.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">


<meta property="og:title" content="(转)javascript 奇淫巧技44招" />
<meta property="og:description" content="1、首次为变量赋值时务必使用var关键字
变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。
2、使用===取代==
==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://zhouxiaoxin.gitee.io/post/javascript/javascript-%E5%A5%87%E6%B7%AB%E5%B7%A7%E6%8A%8044%E6%8B%9B%E8%BD%AC/" /><meta property="article:section" content="post" />
<meta property="article:published_time" content="2017-09-21T15:03:00+00:00" />
<meta property="article:modified_time" content="2017-09-21T15:03:00+00:00" />

<meta itemprop="name" content="(转)javascript 奇淫巧技44招">
<meta itemprop="description" content="1、首次为变量赋值时务必使用var关键字
变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。
2、使用===取代==
==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。"><meta itemprop="datePublished" content="2017-09-21T15:03:00+00:00" />
<meta itemprop="dateModified" content="2017-09-21T15:03:00+00:00" />
<meta itemprop="wordCount" content="4081">
<meta itemprop="keywords" content="JavaScript,转载文章," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="(转)javascript 奇淫巧技44招"/>
<meta name="twitter:description" content="1、首次为变量赋值时务必使用var关键字
变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。
2、使用===取代==
==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/" class="logo">Even</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <a href="/">
        <li class="mobile-menu-item">Home</li>
      </a><a href="/post/">
        <li class="mobile-menu-item">Archs</li>
      </a><a href="/tags/">
        <li class="mobile-menu-item">Tags</li>
      </a><a href="/categories/">
        <li class="mobile-menu-item">Cates</li>
      </a><a href="/about/">
        <li class="mobile-menu-item">About</li>
      </a><a href="/pages/runoob/">
        <li class="mobile-menu-item">runoob</li>
      </a><a href="/pages/98wubi/">
        <li class="mobile-menu-item">98wubi</li>
      </a>
  </ul>
</nav>
  <div class="container" id="mobile-panel">
    <header id="header" class="header">
        <div class="logo-wrapper">
  <a href="/" class="logo">Even</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
        <a class="menu-item-link" href="/">Home</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/post/">Archs</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/tags/">Tags</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/categories/">Cates</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/about/">About</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/pages/runoob/">runoob</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/pages/98wubi/">98wubi</a>
      </li>
  </ul>
</nav>
    </header>

    <main id="main" class="main">
      <div class="content-wrapper">
        <div id="content" class="content">
          <article class="post">
    
    <header class="post-header">
      <h1 class="post-title">(转)javascript 奇淫巧技44招</h1>

      <div class="post-meta">
        <span class="post-time"> 2017-09-21 </span>
        <div class="post-category">
            <a href="/categories/%E8%BD%AC%E8%BD%BD%E6%96%87%E7%AB%A0/"> 转载文章 </a>
            </div>
          <span class="more-meta"> 约 4081 字 </span>
          <span class="more-meta"> 预计阅读 9 分钟 </span>
        <span id="busuanzi_container_page_pv" class="more-meta"> <span id="busuanzi_value_page_pv"><img src="/img/spinner.svg" alt="spinner.svg"/></span> 次阅读 </span>
      </div>
    </header>

    <div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">文章目录</h2>
  <div class="post-toc-content">
    <nav id="TableOfContents">
  <ul>
    <li><a href="#1首次为变量赋值时务必使用var关键字">1、首次为变量赋值时务必使用var关键字</a></li>
    <li><a href="#2使用取代">2、使用===取代==</a></li>
    <li><a href="#3underfinednull0falsenan空字符串的逻辑结果均为false">3、underfined、null、0、false、NaN、空字符串的逻辑结果均为false</a></li>
    <li><a href="#4行尾使用分号">4、行尾使用分号</a></li>
    <li><a href="#5使用对象构造器">5、使用对象构造器</a></li>
    <li><a href="#6小心使用typeofinstanceof和contructor">6、小心使用typeof、instanceof和contructor</a></li>
    <li><a href="#7使用自调用函数">7、使用自调用函数</a></li>
    <li><a href="#8从数组中随机获取成员">8、从数组中随机获取成员</a></li>
    <li><a href="#9获取指定范围内的随机数">9、获取指定范围内的随机数</a></li>
    <li><a href="#10生成从0到指定值的数字数组">10、生成从0到指定值的数字数组</a></li>
    <li><a href="#11生成随机的字母数字字符串">11、生成随机的字母数字字符串</a></li>
    <li><a href="#12打乱数字数组的顺序">12、打乱数字数组的顺序</a></li>
    <li><a href="#13字符串去空格">13、字符串去空格</a></li>
    <li><a href="#14数组之间追加">14、数组之间追加</a></li>
    <li><a href="#15对象转换为数组">15、对象转换为数组</a></li>
    <li><a href="#16验证是否是数字">16、验证是否是数字</a></li>
    <li><a href="#17验证是否是数组">17、验证是否是数组</a></li>
    <li><a href="#18获取数组中的最大值和最小值">18.获取数组中的最大值和最小值</a></li>
    <li><a href="#19清空数组">19、清空数组</a></li>
    <li><a href="#20不要直接从数组中delete或remove元素">20、不要直接从数组中delete或remove元素</a></li>
    <li><a href="#21使用length属性截断数组">21、使用length属性截断数组</a></li>
    <li><a href="#22在条件中使用逻辑与或">22、在条件中使用逻辑与或</a></li>
    <li><a href="#23使得map函数方法对数据循环">23、使得map()函数方法对数据循环</a></li>
    <li><a href="#24保留指定小数位数">24、保留指定小数位数</a></li>
    <li><a href="#25浮点计算的问题">25、浮点计算的问题</a></li>
    <li><a href="#26通过for-in循环检查对象的属性">26、通过for-in循环检查对象的属性</a></li>
    <li><a href="#27逗号操作符">27、逗号操作符</a></li>
    <li><a href="#28临时存储用于计算和查询的变量">28、临时存储用于计算和查询的变量</a></li>
    <li><a href="#29提前检查传入isfinite的参数">29.提前检查传入isFinite()的参数</a></li>
    <li><a href="#30避免在数组中使用负数做索引">30、避免在数组中使用负数做索引</a></li>
    <li><a href="#31用json来序列化与反序列化">31、用JSON来序列化与反序列化</a></li>
    <li><a href="#32不要使用eval或者函数构造器">32、不要使用eval()或者函数构造器</a></li>
    <li><a href="#33避免使用with">33、避免使用with()</a></li>
    <li><a href="#34不要对数组使用for-in">34、不要对数组使用for-in</a></li>
    <li><a href="#35传给setinterval和settimeout时使用函数而不是字符串">35、传给setInterval()和setTimeout()时使用函数而不是字符串</a></li>
    <li><a href="#36使用switchcase代替一大叠的ifelse">36、使用switch/case代替一大叠的if/else</a></li>
    <li><a href="#37在switchcase中使用数字区间">37、在switch/case中使用数字区间</a></li>
    <li><a href="#38使用对象作为对象的原型">38、使用对象作为对象的原型</a></li>
    <li><a href="#39html字段转换函数">39、HTML字段转换函数</a></li>
    <li><a href="#40不要在循环内部使用try-catch-finally">40、不要在循环内部使用try-catch-finally</a></li>
    <li><a href="#41使用xmlhttprequests时注意设置超时">41、使用XMLHttpRequests时注意设置超时</a></li>
    <li><a href="#42处理websocket的超时">42、处理WebSocket的超时</a></li>
    <li><a href="#43时间注意原始操作符比函数调用快使用vanillajs">43、时间注意原始操作符比函数调用快，使用VanillaJS</a></li>
    <li><a href="#44开发时注意代码结构上线前检查并压缩javascript代码">44、开发时注意代码结构，上线前检查并压缩JavaScript代码</a></li>
  </ul>
</nav>
  </div>
</div>
    <div class="post-content">
      <h2 id="1首次为变量赋值时务必使用var关键字">1、首次为变量赋值时务必使用var关键字</h2>
<p>变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。</p>
<h2 id="2使用取代">2、使用===取代==</h2>
<p>==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。</p>
<p>复制代码
[10] === 10    // is false
[10]  == 10    // is true
&lsquo;10&rsquo; == 10     // is true
&lsquo;10&rsquo; === 10    // is false
[]   == 0     // is true
[] ===  0     // is false
'' == false   // is true but true == &ldquo;a&rdquo; is false
'' === false  // is false
复制代码</p>
<h2 id="3underfinednull0falsenan空字符串的逻辑结果均为false">3、underfined、null、0、false、NaN、空字符串的逻辑结果均为false</h2>
<h2 id="4行尾使用分号">4、行尾使用分号</h2>
<p>实践中最好还是使用分号，忘了写也没事，大部分情况下JavaScript解释器都会自动添加。对于为何要使用分号，可参考文章JavaScript中关于分号的真相。</p>
<h2 id="5使用对象构造器">5、使用对象构造器</h2>
<p>function Person(firstName, lastName){
this.firstName =  firstName;
this.lastName = lastName;
}
var Saad = new Person(&ldquo;Saad&rdquo;, &ldquo;Mousliki&rdquo;);</p>
<h2 id="6小心使用typeofinstanceof和contructor">6、小心使用typeof、instanceof和contructor</h2>
<p>typeof：JavaScript一元操作符，用于以字符串的形式返回变量的原始类型，注意，typeof null也会返回object，大多数的对象类型（数组Array、时间Date等）也会返回object
contructor：内部原型属性，可以通过代码重写
instanceof：JavaScript操作符，会在原型链中的构造器中搜索，找到则返回true，否则返回false
var arr = [&ldquo;a&rdquo;, &ldquo;b&rdquo;, &ldquo;c&rdquo;];
typeof arr;   // 返回 &ldquo;object&rdquo;
arr instanceof Array // true
arr.constructor();  //[]</p>
<h2 id="7使用自调用函数">7、使用自调用函数</h2>
<p>函数在创建之后直接自动执行，通常称之为自调用匿名函数（Self-Invoked Anonymous Function）或直接调用函数表达式（Immediately Invoked Function Expression ）。格式如下：</p>
<p>(function(){
// 置于此处的代码将自动执行
})();<br>
(function(a,b){
var result = a+b;
return result;
})(10,20)</p>
<h2 id="8从数组中随机获取成员">8、从数组中随机获取成员</h2>
<p>var items = [12, 548 , &lsquo;a&rsquo; , 2 , 5478 , &lsquo;foo&rsquo; , 8852, , &lsquo;Doe&rsquo; , 2145 , 119];
var  randomItem = items[Math.floor(Math.random() * items.length)];</p>
<h2 id="9获取指定范围内的随机数">9、获取指定范围内的随机数</h2>
<p>这个功能在生成测试用的假数据时特别有数，比如介与指定范围内的工资数。</p>
<p>var x = Math.floor(Math.random() * (max - min + 1)) + min;</p>
<h2 id="10生成从0到指定值的数字数组">10、生成从0到指定值的数字数组</h2>
<p>var numbersArray = [] , max = 100;
for( var i=1; numbersArray.push(i++) &lt; max;);  // numbers = [1,2,3 &hellip; 100]</p>
<h2 id="11生成随机的字母数字字符串">11、生成随机的字母数字字符串</h2>
<p>function generateRandomAlphaNum(len) {
var rdmString = &ldquo;&quot;;
for( ; rdmString.length &lt; len; rdmString  += Math.random().toString(36).substr(2));
return  rdmString.substr(0, len);
}</p>
<h2 id="12打乱数字数组的顺序">12、打乱数字数组的顺序</h2>
<p>var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* numbers 数组将类似于 [120, 5, 228, -215, 400, 458, -85411, 122205]  */
这里使用了JavaScript内置的数组排序函数，更好的办法是用专门的代码来实现（如Fisher-Yates算法），可以参见StackOverFlow上的这个讨论。</p>
<h2 id="13字符串去空格">13、字符串去空格</h2>
<p>Java、C#和PHP等语言都实现了专门的字符串去空格函数，但JavaScript中是没有的，可以通过下面的代码来为String对象函数一个trim函数：</p>
<p>tring.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, &ldquo;&quot;);};
新的JavaScript引擎已经有了trim()的原生实现。</p>
<h2 id="14数组之间追加">14、数组之间追加</h2>
<p>var array1 = [12 , &ldquo;foo&rdquo; , {name &ldquo;Joe&rdquo;} , -2458];
var array2 = [&ldquo;Doe&rdquo; , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 值为  [12 , &ldquo;foo&rdquo; , {name &ldquo;Joe&rdquo;} , -2458 , &ldquo;Doe&rdquo; , 555 , 100] */</p>
<h2 id="15对象转换为数组">15、对象转换为数组</h2>
<p>var argArray = Array.prototype.slice.call(arguments);</p>
<h2 id="16验证是否是数字">16、验证是否是数字</h2>
<p>function isNumber(n){
return !isNaN(parseFloat(n)) &amp;&amp; isFinite(n);
}</p>
<h2 id="17验证是否是数组">17、验证是否是数组</h2>
<p>function isArray(obj){
return Object.prototype.toString.call(obj) === &lsquo;[object Array]&rsquo; ;
}
但如果toString()方法被重写过得话，就行不通了。也可以使用下面的方法：</p>
<p>Array.isArray(obj); // its a new Array method
如果在浏览器中没有使用frame，还可以用instanceof，但如果上下文太复杂，也有可能出错。</p>
<p>复制代码
var myFrame = document.createElement(&lsquo;iframe&rsquo;);
document.body.appendChild(myFrame);
var myArray = window.frames[window.frames.length-1].Array;
var arr = new myArray(a,b,10); // [a,b,10]<br>
// myArray 的构造器已经丢失，instanceof 的结果将不正常
// 构造器是不能跨 frame 共享的
arr instanceof Array; // false
复制代码</p>
<h2 id="18获取数组中的最大值和最小值">18.获取数组中的最大值和最小值</h2>
<p>var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
var maxInNumbers = Math.max.apply(Math, numbers);
var minInNumbers = Math.min.apply(Math, numbers);</p>
<h2 id="19清空数组">19、清空数组</h2>
<p>var myArray = [12 , 222 , 1000 ];<br>
myArray.length = 0; // myArray will be equal to [].</p>
<h2 id="20不要直接从数组中delete或remove元素">20、不要直接从数组中delete或remove元素</h2>
<p>如果对数组元素直接使用delete，其实并没有删除，只是将元素置为了undefined。数组元素删除应使用splice。</p>
<p>切忌：</p>
<p>var items = [12, 548 ,&lsquo;a&rsquo; , 2 , 5478 , &lsquo;foo&rsquo; , 8852, , &lsquo;Doe&rsquo; ,2154 , 119 ];
items.length; // return 11
delete items[3]; // return true
items.length; // return 11
/* items 结果为 [12, 548, &ldquo;a&rdquo;, undefined × 1, 5478, &ldquo;foo&rdquo;, 8852, undefined × 1, &ldquo;Doe&rdquo;, 2154, 119] */
而应：</p>
<p>var items = [12, 548 ,&lsquo;a&rsquo; , 2 , 5478 , &lsquo;foo&rsquo; , 8852, , &lsquo;Doe&rsquo; ,2154 , 119 ];
items.length; // return 11
items.splice(3,1) ;
items.length; // return 10
/* items 结果为 [12, 548, &ldquo;a&rdquo;, 5478, &ldquo;foo&rdquo;, 8852, undefined × 1, &ldquo;Doe&rdquo;, 2154, 119]
删除对象的属性时可以使用delete。</p>
<h2 id="21使用length属性截断数组">21、使用length属性截断数组</h2>
<p>前面的例子中用length属性清空数组，同样还可用它来截断数组：</p>
<p>var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];<br>
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].
与此同时，如果把length属性变大，数组的长度值变会增加，会使用undefined来作为新的元素填充。length是一个可写的属性。</p>
<p>myArray.length = 10; // the new array length is 10
myArray[myArray.length - 1] ; // undefined</p>
<h2 id="22在条件中使用逻辑与或">22、在条件中使用逻辑与或</h2>
<p>var foo = 10;<br>
foo == 10 &amp;&amp; doSomething(); // is the same thing as if (foo == 10) doSomething();
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();
逻辑或还可用来设置默认值，比如函数参数的默认值。</p>
<p>function doSomething(arg1){
arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
}</p>
<h2 id="23使得map函数方法对数据循环">23、使得map()函数方法对数据循环</h2>
<p>var squares = [1,2,3,4].map(function (val) {<br>
return val * val;<br>
});
// squares will be equal to [1, 4, 9, 16]</p>
<h2 id="24保留指定小数位数">24、保留指定小数位数</h2>
<p>var num =2.443242342;
num = num.toFixed(4);  // num will be equal to 2.4432
注意，toFixec()返回的是字符串，不是数字。</p>
<h2 id="25浮点计算的问题">25、浮点计算的问题</h2>
<p>0.1 + 0.2 === 0.3 // is false
9007199254740992 + 1 // is equal to 9007199254740992
9007199254740992 + 2 // is equal to 9007199254740994
为什么呢？因为0.1+0.2等于0.30000000000000004。JavaScript的数字都遵循IEEE 754标准构建，在内部都是64位浮点小数表示，具体可以参见JavaScript中的数字是如何编码的.</p>
<p>可以通过使用toFixed()和toPrecision()来解决这个问题。</p>
<h2 id="26通过for-in循环检查对象的属性">26、通过for-in循环检查对象的属性</h2>
<p>下面这样的用法，可以防止迭代的时候进入到对象的原型属性中。</p>
<p>for (var name in object) {<br>
if (object.hasOwnProperty(name)) {
// do something with name
}<br>
}</p>
<h2 id="27逗号操作符">27、逗号操作符</h2>
<p>var a = 0;
var b = ( a++, 99 );
console.log(a);  // a will be equal to 1
console.log(b);  // b is equal to 99</p>
<h2 id="28临时存储用于计算和查询的变量">28、临时存储用于计算和查询的变量</h2>
<p>在jQuery选择器中，可以临时存储整个DOM元素。</p>
<p>var navright = document.querySelector('#right');
var navleft = document.querySelector('#left');
var navup = document.querySelector('#up');
var navdown = document.querySelector('#down');</p>
<h2 id="29提前检查传入isfinite的参数">29.提前检查传入isFinite()的参数</h2>
<p>复制代码
isFinite(0/0) ; // false
isFinite(&ldquo;foo&rdquo;); // false
isFinite(&ldquo;10&rdquo;); // true
isFinite(10);   // true
isFinite(undefined);  // false
isFinite();   // false
isFinite(null);  // true，这点当特别注意
复制代码</p>
<h2 id="30避免在数组中使用负数做索引">30、避免在数组中使用负数做索引</h2>
<p>var numbersArray = [1,2,3,4,5];
var from = numbersArray.indexOf(&ldquo;foo&rdquo;) ;  // from is equal to -1
numbersArray.splice(from,2);    // will return [5]
注意传给splice的索引参数不要是负数，当是负数时，会从数组结尾处删除元素。</p>
<h2 id="31用json来序列化与反序列化">31、用JSON来序列化与反序列化</h2>
<p>var person = {name :&lsquo;Saad&rsquo;, age : 26, department : {ID : 15, name : &ldquo;R&amp;D&rdquo;} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson 结果为 &ldquo;{&ldquo;name&rdquo;:&ldquo;Saad&rdquo;,&ldquo;age&rdquo;:26,&ldquo;department&rdquo;:{&ldquo;ID&rdquo;:15,&ldquo;name&rdquo;:&ldquo;R&amp;D&rdquo;}}&rdquo;   <em>/
var personFromString = JSON.parse(stringFromPerson);
/</em> personFromString 的值与 person 对象相同  */</p>
<h2 id="32不要使用eval或者函数构造器">32、不要使用eval()或者函数构造器</h2>
<p>eval()和函数构造器（Function consturctor）的开销较大，每次调用，JavaScript引擎都要将源代码转换为可执行的代码。</p>
<p>var func1 = new Function(functionCode);
var func2 = eval(functionCode);</p>
<h2 id="33避免使用with">33、避免使用with()</h2>
<p>使用with()可以把变量加入到全局作用域中，因此，如果有其它的同名变量，一来容易混淆，二来值也会被覆盖。</p>
<h2 id="34不要对数组使用for-in">34、不要对数组使用for-in</h2>
<p>避免：</p>
<p>var sum = 0;<br>
for (var i in arrayNumbers) {<br>
sum += arrayNumbers[i];<br>
}
而是：</p>
<p>var sum = 0;<br>
for (var i = 0, len = arrayNumbers.length; i &lt; len; i++) {<br>
sum += arrayNumbers[i];<br>
}
另外一个好处是，i和len两个变量是在for循环的第一个声明中，二者只会初始化一次，这要比下面这种写法快：</p>
<p>for (var i = 0; i &lt; arrayNumbers.length; i++)</p>
<h2 id="35传给setinterval和settimeout时使用函数而不是字符串">35、传给setInterval()和setTimeout()时使用函数而不是字符串</h2>
<p>如果传给setTimeout()和setInterval()一个字符串，他们将会用类似于eval方式进行转换，这肯定会要慢些，因此不要使用：</p>
<p>setInterval(&lsquo;doSomethingPeriodically()&rsquo;, 1000);<br>
setTimeout(&lsquo;doSomethingAfterFiveSeconds()&rsquo;, 5000);
而是用：</p>
<p>setInterval(doSomethingPeriodically, 1000);<br>
setTimeout(doSomethingAfterFiveSeconds, 5000);</p>
<h2 id="36使用switchcase代替一大叠的ifelse">36、使用switch/case代替一大叠的if/else</h2>
<p>当判断有超过两个分支的时候使用switch/case要更快一些，而且也更优雅，更利于代码的组织，当然，如果有超过10个分支，就不要使用switch/case了。</p>
<h2 id="37在switchcase中使用数字区间">37、在switch/case中使用数字区间</h2>
<p>其实，switch/case中的case条件，还可以这样写：</p>
<p>复制代码
function getCategory(age) {<br>
var category = &ldquo;&quot;;<br>
switch (true) {<br>
case isNaN(age):<br>
category = &ldquo;not an age&rdquo;;<br>
break;<br>
case (age &gt;= 50):<br>
category = &ldquo;Old&rdquo;;<br>
break;<br>
case (age &lt;= 20):<br>
category = &ldquo;Baby&rdquo;;<br>
break;<br>
default:<br>
category = &ldquo;Young&rdquo;;<br>
break;<br>
};<br>
return category;<br>
}<br>
getCategory(5);  // 将返回 &ldquo;Baby&rdquo;
复制代码</p>
<h2 id="38使用对象作为对象的原型">38、使用对象作为对象的原型</h2>
<p>下面这样，便可以给定对象作为参数，来创建以此为原型的新对象：</p>
<p>function clone(object) {<br>
function OneShotConstructor(){};
OneShotConstructor.prototype = object;<br>
return new OneShotConstructor();
}
clone(Array).prototype ;  // []</p>
<h2 id="39html字段转换函数">39、HTML字段转换函数</h2>
<p>复制代码
function escapeHTML(text) {<br>
var replacements= {&quot;&lt;&quot;: &ldquo;&lt;&rdquo;, &ldquo;&gt;&quot;: &ldquo;&gt;&rdquo;,&quot;&amp;&quot;: &ldquo;&amp;&rdquo;, &ldquo;&quot;&quot;: &ldquo;&quot;&quot;};                   <br>
return text.replace(/[&lt;&gt;&amp;&quot;]/g, function(character) {<br>
return replacements[character];<br>
});
}
复制代码</p>
<h2 id="40不要在循环内部使用try-catch-finally">40、不要在循环内部使用try-catch-finally</h2>
<p>try-catch-finally中catch部分在执行时会将异常赋给一个变量，这个变量会被构建成一个运行时作用域内的新的变量。</p>
<p>切忌：</p>
<p>复制代码
var object = [&lsquo;foo&rsquo;, &lsquo;bar&rsquo;], i;<br>
for (i = 0, len = object.length; i &lt;len; i++) {<br>
try {<br>
// do something that throws an exception
}<br>
catch (e) {<br>
// handle exception<br>
}
}
复制代码
而应该：</p>
<p>复制代码
var object = [&lsquo;foo&rsquo;, &lsquo;bar&rsquo;], i;<br>
try {
for (i = 0, len = object.length; i &lt;len; i++) {<br>
// do something that throws an exception
}
}
catch (e) {<br>
// handle exception<br>
}
复制代码</p>
<h2 id="41使用xmlhttprequests时注意设置超时">41、使用XMLHttpRequests时注意设置超时</h2>
<p>XMLHttpRequests在执行时，当长时间没有响应（如出现网络问题等）时，应该中止掉连接，可以通过setTimeout()来完成这个工作：</p>
<p>复制代码
var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = function () {<br>
if (this.readyState == 4) {<br>
clearTimeout(timeout);<br>
// do something with response data
}<br>
}<br>
var timeout = setTimeout( function () {<br>
xhr.abort(); // call error callback<br>
}, 60<em>1000 /</em> timeout after a minute */ );
xhr.open(&lsquo;GET&rsquo;, url, true);<br>
xhr.send();
复制代码
同时需要注意的是，不要同时发起多个XMLHttpRequests请求。</p>
<h2 id="42处理websocket的超时">42、处理WebSocket的超时</h2>
<p>通常情况下，WebSocket连接创建后，如果30秒内没有任何活动，服务器端会对连接进行超时处理，防火墙也可以对单位周期没有活动的连接进行超时处理。</p>
<p>为了防止这种情况的发生，可以每隔一定时间，往服务器发送一条空的消息。可以通过下面这两个函数来实现这个需求，一个用于使连接保持活动状态，另一个专门用于结束这个状态。</p>
<p>复制代码
var timerID = 0;
function keepAlive() {
var timeout = 15000;<br>
if (webSocket.readyState == webSocket.OPEN) {<br>
webSocket.send('');<br>
}<br>
timerId = setTimeout(keepAlive, timeout);<br>
}<br>
function cancelKeepAlive() {<br>
if (timerId) {<br>
cancelTimeout(timerId);<br>
}<br>
}
复制代码
keepAlive()函数可以放在WebSocket连接的onOpen()方法的最后面，cancelKeepAlive()放在onClose()方法的最末尾。</p>
<h2 id="43时间注意原始操作符比函数调用快使用vanillajs">43、时间注意原始操作符比函数调用快，使用VanillaJS</h2>
<p>比如，一般不要这样：</p>
<p>var min = Math.min(a,b);
A.push(v);
可以这样来代替：</p>
<p>var min = a &lt; b ? a : b;
A[A.length] = v;</p>
<h2 id="44开发时注意代码结构上线前检查并压缩javascript代码">44、开发时注意代码结构，上线前检查并压缩JavaScript代码</h2>
<p>可以使用JSLint或JSMin等工具来检查并压缩代码。</p>
    </div>

    <div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">文章作者</span>
    <span class="item-content">even</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">上次更新</span>
    <span class="item-content">
        2017-09-21
        
    </span>
  </p>
  
  
</div>
<footer class="post-footer">
      <div class="post-tags">
          <a href="/tags/javascript/">JavaScript</a>
          <a href="/tags/%E8%BD%AC%E8%BD%BD%E6%96%87%E7%AB%A0/">转载文章</a>
          </div>
      <nav class="post-nav">
        <a class="prev" href="/post/linux/linux%E7%B3%BB%E7%BB%9F%E5%8F%91%E8%A1%8C%E7%89%88/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">Linux系统发行版</span>
            <span class="prev-text nav-mobile">上一篇</span>
          </a>
        <a class="next" href="/post/javascript/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">
            <span class="next-text nav-default">ES6学习笔记</span>
            <span class="next-text nav-mobile">下一篇</span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>
        </div>
        

  

  

      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:your@email.com" class="iconfont icon-email" title="email"></a>
      <a href="http://localhost:1313" class="iconfont icon-stack-overflow" title="stack-overflow"></a>
      <a href="http://localhost:1313" class="iconfont icon-twitter" title="twitter"></a>
      <a href="http://localhost:1313" class="iconfont icon-facebook" title="facebook"></a>
      <a href="http://localhost:1313" class="iconfont icon-linkedin" title="linkedin"></a>
      <a href="http://localhost:1313" class="iconfont icon-google" title="google"></a>
      <a href="http://localhost:1313" class="iconfont icon-github" title="github"></a>
      <a href="http://localhost:1313" class="iconfont icon-weibo" title="weibo"></a>
      <a href="http://localhost:1313" class="iconfont icon-zhihu" title="zhihu"></a>
      <a href="http://localhost:1313" class="iconfont icon-douban" title="douban"></a>
      <a href="http://localhost:1313" class="iconfont icon-pocket" title="pocket"></a>
      <a href="http://localhost:1313" class="iconfont icon-tumblr" title="tumblr"></a>
      <a href="http://localhost:1313" class="iconfont icon-instagram" title="instagram"></a>
      <a href="http://localhost:1313" class="iconfont icon-gitlab" title="gitlab"></a>
      <a href="http://localhost:1313" class="iconfont icon-bilibili" title="bilibili"></a>
  <a href="https://zhouxiaoxin.gitee.io/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
</div>

<div class="copyright">
  <span class="power-by">
    由 <a class="hexo-link" href="https://gohugo.io">Hugo</a> 强力驱动
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    主题 - 
    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
  </span>

  <div class="busuanzi-footer">
    <span id="busuanzi_container_site_pv"> 本站总访问量 <span id="busuanzi_value_site_pv"><img src="/img/spinner.svg" alt="spinner.svg"/></span> 次 </span>
      <span class="division">|</span>
    <span id="busuanzi_container_site_uv"> 本站总访客数 <span id="busuanzi_value_site_uv"><img src="/img/spinner.svg" alt="spinner.svg"/></span> 人 </span>
  </div>

  <span class="copyright-year">
    &copy; 
    2018 - 
    2022
    <span class="heart">
      <i class="iconfont icon-heart"></i>
    </span>
    <span class="author">even</span>
  </span>
</div>
    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>



<script type="text/javascript" src="/js/main.min.2517c0eb67172a0bae917de4af59b10ca2531411a009d4c0b82f5685259e5771.js"></script>








</body>
</html>
